.dropdown {
    display: inline-flex;
    align-items: center;
    & + .dropdown {
        margin-left: 0.5em;
    }
    .trigger {
        display: inline-block;
    }
    .background {
        @include overlay;
        position: fixed;
        background-color: rgba($black, 0.86);
        z-index: 10;
        transition: opacity $speed $easing;
        cursor: pointer;
    }
    .box {
        position: absolute;
        padding: 0.5em 0;
        z-index: 10;
        white-space: nowrap;
        transition: opacity $speed $easing;
        .option {
            @include unselectable;
            padding: 0.5rem 1rem;
            cursor: pointer;
            &:not(.is-subheader, .is-disabled):hover {
                background: $background;
            }
            &.is-selected {
                background: $primary !important;
                color: $primary-invert;
            }
            &.is-separator {
                border-bottom: 1px solid $background;
                margin: 0.5rem 0;
                padding: 0 !important;
                cursor: inherit;
            }
            &.is-disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
            &.is-subheader {
                cursor: inherit;
                // Remove unselectable
                -webkit-touch-callout: inherit;
                -webkit-user-select: inherit;
                -moz-user-select: inherit;
                -ms-user-select: inherit;
                user-select: inherit;
            }
            &.has-link {
                padding: 0;
                a {
                    padding: 0.5rem 1rem;
                    display: block;
                    color: inherit;
                }
            }
        }
        &.is-top-right{
            top: auto;
            bottom: 100%;
            left: 0;
        }
        &.is-top-left{
            top: auto;
            bottom: 100%;
            right: 0;
        }
        &.is-bottom-right{
            top: 100%;
            left: 0;
        }
        &.is-bottom-left{
            top: 100%;
            right: 0;
        }
        &.is-narrow {
            .option {
                padding: 0.25rem 0.75rem;
            }
        }
    }
    &.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
        .trigger {
            pointer-events: none;
        }
    }
    @include touch {
        .box {
            position: fixed;
            width: calc(100vw - 60px);
            max-width: 600px;
            max-height: calc(100vh - 120px);
            top: 50% !important;
            left: 50% !important;
            transform: translate3d(-50%, -50%, 0);
            white-space: normal;
            &.is-narrow {
                .option {
                    padding: 0.75rem 1rem;
                }
            }
            .option {
                padding: 1rem 1.5rem;
                &.has-subheader {
                    padding: 1rem 2rem;
                }
            }
        }
    }
}
